<template>
  <view class="blacklist-page">
    <!-- 顶部导航：返回箭头 + 居中标题 -->
    <view class="top-nav">
      <!-- 返回按钮 -->
      <view class="back-btn" @click="navigateBack">
        <image 
          class="back-icon" 
          src="/static/icons/left.png" 
          mode="widthFix"
        ></image>
      </view>
      <!-- 标题 -->
      <text class="page-title">黑名单</text>
      <!-- 右侧占位（保持标题居中） -->
      <view class="empty"></view>
    </view>

    <!-- 黑名单列表 -->
    <view class="blacklist-list">
      <!-- 加载中状态 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>

      <!-- 空状态 -->
      <view v-if="!loading && blacklistData.length === 0" class="empty-state">
        <image 
          class="empty-img" 
          src="/static/icons/empty-blacklist.png" 
          mode="widthFix"
        ></image>
        <text class="empty-text">暂无拉黑的职位</text>
      </view>

      <!-- 列表项 -->
      <block v-for="(item, index) in blacklistData" :key="item.blackListId">
        <view class="blacklist-item">
          <!-- 内容区 -->
          <view class="item-content">
            <!-- 职位+薪资（用startSalary和maxSalary拼接） -->
            <view class="item-top">
              <text class="position">{{ item.recruitInfoDO.recruitName }}</text>
              <text class="salary">{{ setSalary(item.recruitInfoDO.startSalary,item.recruitInfoDO.maxSalary,item.recruitInfoDO.payMethod) }}</text>
            </view>
            <!-- 公司名称 -->
            <text class="company">{{ item.companyDO.companyName}}</text>
            <!-- 标签（展示技能需求，按逗号分割为标签） -->
            <view class="tags" >
              <text class="tag">{{ item.recruitInfoDO.skillRequest }}</text>
            </view>
            <!-- HR信息（展示HR名称） -->
            <view class="hr-info">
              <text class="hr-text">{{ item.hrDO.hrName }} | 已拉黑</text>
            </view>
          </view>

          <!-- 单个删除按钮（取消拉黑） -->
          <view class="delete-btn-single" @click.stop="handleDeleteBlacklist(item.blackListId)">
            <image 
              class="delete-icon" 
              src="/static/icons/delete.png" 
              mode="widthFix"
            ></image>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>

import state from '../../store/state';

import { selectBlack, deleteBlack } from '@/api/black.js';

export default {
  data() {
    return {
      blacklistData: [], // 黑名单列表数据（存储后端返回的字段）
      loading: false,    // 加载状态
      userId: null       // 当前登录用户ID（从store获取）
    };
  },
  onLoad() {
    // 页面加载时先获取用户信息，再查询黑名单列表
    this.loadUserInfo();
  },
  methods: {
	  setSalary(startSalary, maxSalary, payMethod) {
	    if (payMethod === 4) {
	      return `面议`;
	    }
	    if (payMethod === 0) {
	      if (maxSalary === null) return `${startSalary}/日 起`;
	      if (startSalary === null) return `最高 ${maxSalary}/日`;
	      return `${startSalary} ~ ${maxSalary}/日`;
	    }
	    if (payMethod === 1) {
	      if (maxSalary === null) return `${startSalary}/周 起`;
	      if (startSalary === null) return `最高 ${maxSalary}/周`;
	      return `${startSalary} ~ ${maxSalary}/周`;
	    }
	    if (payMethod === 2) {
	      if (maxSalary === null) return `${startSalary}/月 起`;
	      if (startSalary === null) return `最高 ${maxSalary}/月`;
	      return `${startSalary} ~ ${maxSalary}/月`;
	    }
	    if (payMethod === 3) {
	      if (maxSalary === null) return `${startSalary}/时 起`;
	      if (startSalary === null) return `最高 ${maxSalary}/时`;
	      return `${startSalary} ~ ${maxSalary}/时`;
	    }
	    return '薪资面议'; // 默认值
	  },
    // 加载用户信息（处理store中userInfo延迟加载的情况）
    loadUserInfo() {
      if (!state.userInfo) {
        // 延迟2秒重试，确保获取到用户ID后再查询
        setTimeout(() => {
          this.loadUserInfo();
        }, 2000);
        return;
      }
      // 赋值用户ID并查询黑名单列表
      this.userId = state.userInfo.userId;
      this.getBlacklistData();
    },

    // 返回上一页（个人中心）
    navigateBack() {
      uni.navigateBack();
    },

    // 格式化技能需求为标签（将skillRequest按逗号分割成数组）
    formatSkillTags(skillRequest) {
      // 处理后端返回可能的空值，避免报错
      if (!skillRequest) return [];
      // 按逗号分割，去除空字符串（如后端返回"Java,Python,"时过滤最后一个空值）
      return skillRequest.split(',').filter(tag => tag.trim() !== '');
    },

    // 1. 查询黑名单列表（前后端交互）
    getBlacklistData() {
      this.loading = true;
      // 调用后端接口，传递用户ID（后端根据userId查询该用户的拉黑记录）
      selectBlack({ userId: this.userId })
        .then(res => {
          this.loading = false;
          // 后端返回成功（假设code=200为成功）
          if (res.code === 200) {
            // 赋值后端返回的黑名单数据（字段与后端保持一致）
            this.blacklistData = res.data;
          } else {
            // 后端返回失败，提示错误信息
            uni.showToast({
              title: res.msg || '获取黑名单列表失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          this.loading = false;
          // 捕获网络异常
          console.error('获取黑名单列表异常：', err);
          uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
          });
        });
    },

    // 2. 删除黑名单（取消拉黑，前后端交互）
    handleDeleteBlacklist(blackListId) {
      // 先显示确认弹窗
      uni.showModal({
        title: '提示',
        content: '确定取消拉黑该职位吗？',
        showCancel: true,
        cancelText: '取消',
        confirmText: '确定',
        success: (modalRes) => {
          // 用户点击确认后调用删除接口
          if (modalRes.confirm) {
            // 调用后端删除接口（传递拉黑记录ID和用户ID，做权限校验）
            deleteBlack(blackListId)
              .then(res => {
                // 后端删除成功
                if (res.code === 200) {
                  // 前端同步删除该条数据（过滤掉已删除的记录）
                  this.blacklistData = this.blacklistData.filter(
                    item => item.blackListId !== blackListId
                  );
                  // 提示删除成功
                  uni.showToast({
                    title: '取消拉黑成功',
                    icon: 'success'
                  });
                } else {
                  // 后端删除失败
                  uni.showToast({
                    title: res.msg || '取消拉黑失败',
                    icon: 'none'
                  });
                }
              })
              .catch(err => {
                // 捕获网络异常
                console.error('取消拉黑异常：', err);
                uni.showToast({
                  title: '网络异常，请稍后重试',
                  icon: 'none'
                });
              });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.blacklist-page {
  background-color: #fff;
  min-height: 100vh;
}

/* 顶部导航 */
.top-nav {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
}

/* 返回按钮 */
.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back-icon {
  width: 16px;
  height: 16px;
}

/* 标题居中 */
.page-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

/* 右侧占位 */
.empty {
  width: 44px;
  height: 44px;
}

/* 黑名单列表 */
.blacklist-list {
  padding: 10px 15px;
}

/* 加载中状态 */
.loading {
  text-align: center;
  padding: 50px 0;
  color: #666;
  font-size: 14px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}
.empty-img {
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
}
.empty-text {
  color: #999;
  font-size: 14px;
}

/* 列表项 */
.blacklist-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: #fff;
}

/* 内容区 */
.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 职位+薪资 */
.item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.position {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.salary {
  font-size: 14px;
  color: #ff4d4f;
}

/* 公司名称 */
.company {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

/* 标签 */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.tag {
  padding: 2px 6px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

/* HR信息 */
.hr-info {
  font-size: 12px;
  color: #999;
}

/* 单个删除按钮 */
.delete-btn-single {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
.delete-icon {
  width: 20px;
  height: 20px;
  color: #ff4d4f;
}
</style>